<template>
	<div class="use">
		<input type="text" v-model="oldval" placeholder="请输入需要加密的文字" >
		<button @click="encrypt">加密</button>
		<button @click="decrypt">解密</button>
		<br>
		<input type="text" v-model="newval">
	</div>
</template>
<script>
	import {
		Decrypt,
		Encrypt
	} from "@/utils/crypto"
	export default {
		data() {
			return {
				oldval: '',
				newval: ''
			}
		},
		watch: {
			oldval: {
				handler(newval,oldval) {
					console.log(newval,oldval)
					if(newval === ''){
						this.newval = 'immediate为true时监听函数会执行一遍哦'
					}
				},
				immediate: true
			}
		},
		methods: {
			encrypt() {
				if(this.oldval === ''){
					alert('啥都不输，点尼玛呢？？？')
					return
				}
				this.newval = Encrypt(this.oldval)
			},
			decrypt() {
				this.newval = Decrypt(this.oldval)
			}
		},
		mounted() {
			console.log(Decrypt)
		}
	}
</script>
<style>
	body,html{
		width: 100%;
		height: 100%;
	}
	body{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.use{
		border: 1px solid #999;
		width: 300px;
		height: 400px;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
	}
	.use input,.use button{
		width: 90%;
		height: 60px;
	}
</style>
